<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>小红书</title>
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/index.css" />
    <link rel="stylesheet" href="/css/common.css" />
    <script src="/js/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <div class="container">
      <!-- 左侧导航 -->
      <div class="sidebar" style="margin-top: -60px">
        <img
          style="height: 40px; margin-bottom: 12px"
          src=""
          alt=""
        />
        <div class="nav-item active" data-page="">首页</div>
        <div class="nav-item">通知</div>
        <div class="nav-item" data-page="">我</div>
      </div>
      <!-- 主要内容区域 -->
      <main class="main-content">
        <!-- 顶部导航 -->
        <div class="top-nav">
          <div class="search-container">
            <div class="search-box">
              <input type="text" class="search-input" placeholder="搜索笔记" />
              <i class="ri-search-line"></i>
            </div>
          </div>
          <div class="nav-items">
            <span class="nav-item1 active" data-category="recommend">推荐</span>
            <span class="nav-item1" data-category="fashion">穿搭</span>
            <span class="nav-item1" data-category="food">美食</span>
            <span class="nav-item1">彩妆</span>
            <span class="nav-item1">影视</span>
            <span class="nav-item1">职场</span>
            <span class="nav-item1">情感</span>
            <span class="nav-item1">家居</span>
            <span class="nav-item1">游戏</span>
            <span class="nav-item1">旅行</span>
            <span class="nav-item1">健身</span>
          </div>
        </div>

        <!-- 内容网格 -->
        <div
          class="content-grid"
          style="
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            padding: 50px;
          "
        ></div>
      </main>
    </div>

    <script>
      // 默认数据
      const defaultData = {
        recommend: [
          {
            coverpic:
              "https://sns-webpic-qc.xhscdn.com/202504250909/1f17448410fda8cac67d321f10d9214f/1040g00831fjhnm84nk605ptgj6eji5rhbeb62go!nc_n_webp_mw_1",
            text: "不懂就问，一小时涨17%是什么意思？",
            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://sns-webpic-qc.xhscdn.com/202504250909/1f17448410fda8cac67d321f10d9214f/1040g00831fjhnm84nk605ptgj6eji5rhbeb62go!nc_n_webp_mw_1",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/d95077b8f914389c73340a8f11bf083d_288x384.jpg?f=webp&q=60",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://sns-webpic-qc.xhscdn.com/202504250909/1f17448410fda8cac67d321f10d9214f/1040g00831fjhnm84nk605ptgj6eji5rhbeb62go!nc_n_webp_mw_1",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/d95077b8f914389c73340a8f11bf083d_288x384.jpg?f=webp&q=60",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/d95077b8f914389c73340a8f11bf083d_288x384.jpg?f=webp&q=60",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://sns-webpic-qc.xhscdn.com/202504251637/4d6dac52b4ef0359d15c22b972349eaf/1040g00831fjmsg1j020g5p26534aahg1sg2acr8!nc_n_webp_mw_1",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://sns-webpic-qc.xhscdn.com/202504251637/4d6dac52b4ef0359d15c22b972349eaf/1040g00831fjmsg1j020g5p26534aahg1sg2acr8!nc_n_webp_mw_1",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/d95077b8f914389c73340a8f11bf083d_288x384.jpg?f=webp&q=60",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
          {
            coverpic:
              "https://sns-webpic-qc.xhscdn.com/202504251637/4d6dac52b4ef0359d15c22b972349eaf/1040g00831fjmsg1j020g5p26534aahg1sg2acr8!nc_n_webp_mw_1",
            text: "不懂就问，一小时涨17%是什么意思？",

            username: "夏日",
            likes: 10,
          },
        ],
        fashion: [
          {
            coverpic: "https://via.placeholder.com/300x400",
            text: "春季穿搭指南：如何穿出高级感？",
            coverpic: "https://via.placeholder.com/30x30",
            username: "时尚达人",
            likes: 256,
          },
        ],
        food: [
          {
            coverpic: "https://via.placeholder.com/300x400",
            text: "在家也能做的米其林三星料理",
            coverpic: "https://via.placeholder.com/30x30",
            username: "美食家",
            likes: 189,
          },
        ],
      };

      // 瀑布流加载相关变量
      let currentPage = 1;
      const pageSize = 10;
      let isLoading = false;
      let currentCategory = "recommend";

      // 渲染卡片函数
      function renderCards(category, data) {
        const section = $(".content-grid");
        if (currentPage === 1) {
          section.empty();
        }

        data.forEach((item) => {
          const card = `
            <div class="card">
              <div class="card-image" style="height: 300px; overflow: hidden;">
                <img src="${item.coverpic}" alt="图片" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;" />
              </div>
              <div class="card-content">
                <p class="card-text">${item.text}</p>
                <div class="card-footer">
                  <div class="user-info">
                    <img src="${item.coverpic}" alt="用户头像" class="avatar" />
                    <span class="username">${item.username}</span>
                  </div>
                  <div class="like-count">
                    <i class="ri-heart-line"></i>
                    <span>${item.likes}</span>
                  </div>
                </div>
              </div>
            </div>
          `;
          section.append(card);
        });
      }

      // 获取数据函数
      async function fetchData(category, page = 1) {
        try {
          const response = await fetch(
            `/api/bookstores/get_anime_by_channel?column_id=9&type=1&p=${page}&page_size=${pageSize}`
          );
          if (!response.ok) {
            throw new Error("API请求失败");
          }
          const data = await response.json();
          return data;
        } catch (error) {
          console.error("获取数据失败，使用默认数据:", error);
          // 模拟分页数据
          const start = (page - 1) * pageSize;
          const end = start + pageSize;

          return defaultData[category].slice(start, end);
        }
      }

      // 加载更多数据
      async function loadMore() {
        if (isLoading) return;
        isLoading = true;

        try {
          const data = await fetchData(currentCategory, currentPage + 1);
          if (
            data &&
            data.data &&
            data.data.list &&
            data.data.list.length > 0
          ) {
            currentPage++;
            renderCards(currentCategory, data.data.list);
          }
        } catch (error) {
          console.error("加载更多数据失败:", error);
        } finally {
          isLoading = false;
        }
      }

      // 滚动加载
      function handleScroll() {
        const mainContent = document.querySelector(".main-content");
        const scrollHeight = mainContent.scrollHeight;
        const scrollTop = mainContent.scrollTop;
        const clientHeight = mainContent.clientHeight;

        // 当滚动到距离底部100px时触发加载
        if (scrollHeight - scrollTop - clientHeight <= 100) {
          loadMore();
        }
      }

      $(document).ready(function () {
        // 初始加载推荐内容
        fetchData("recommend")
          .then((data) => {
            if (data && data.data && data.data.list) {
              renderCards("recommend", data.data.list);
            } else {
              // 如果接口请求失败，使用默认数据
              renderCards(
                "recommend",
                defaultData["recommend"].slice(0, pageSize)
              );
            }
          })
          .catch((error) => {
            console.error("初始加载数据失败:", error);
            // 发生错误时使用默认数据
            renderCards(
              "recommend",
              defaultData["recommend"].slice(0, pageSize)
            );
          });

        // 导航项点击事件
        $(".nav-item1").click(async function () {
          // 移除所有导航项的active类
          $(".nav-item1").removeClass("active");
          // 给当前点击的导航项添加active类
          $(this).addClass("active");

          // 获取当前点击的分类
          const category = $(this).data("category");
          if (!category) return;

          // 重置分页
          currentPage = 1;
          currentCategory = category;

          // 获取并渲染数据
          const data = await fetchData(category, currentPage);
          renderCards(category, data.data.list);
        });

        // 导航栏点击事件
        const navItems = document.querySelectorAll(".nav-item");
        navItems.forEach((item) => {
          item.addEventListener("click", function () {
            const page = this.getAttribute("data-page");
            if (page) {
              window.location.href = page;
            }
          });
        });

        // 在main-content元素加载完成后添加滚动事件监听
        const mainContent = document.querySelector(".main-content");
        if (mainContent) {
          mainContent.addEventListener("scroll", handleScroll);
        }
      });
    </script>
  </body>
</html>
